<template>
  <div class="input-block">
    <div class="input-row">
      <el-select v-model="selectedOption" class="input-select">
        <el-option v-for="(option, index) in srcTexts" :key="index" :label="option.text_en" :value="index" />
      </el-select>
      <el-button type="primary" v-if="!isStudent()" :disabled="selectedOption===''" @click="deleteSelected">
        删除所选
      </el-button>
      <!-- <el-button type="primary" @click="save" v-if="!isStudent()">
        批量添加
      </el-button> -->
    </div>
    <div class="input-row">
      <el-input v-model="inputValue" placeholder="请输入或选择英文" :disabled="isStudent()">
        <!-- <template slot="prepend">
          <el-select v-model="selectedOption" :disabled="isStudent()" @change="onSelectChange" slot="reference">
            <el-option v-for="(option, index) in srcTexts" :key="index" :label="option.label" :value="option.value" />
          </el-select>
        </template> -->
      </el-input>
      <el-button type="primary" @click="translate" :disabled="!inputValue.length">
        翻译
      </el-button>
      <el-button type="primary" :disabled="!inputValue.length" @click="save" v-if="!isStudent()">
        保存
      </el-button>
    </div>
    <div class="output-row">
      <el-input v-model="outputValue" placeholder="翻译结果" :disabled="true" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { isAdmin, isResearcher, isStudent } from '../utils/apiUser'
import { getSourceTexts, deleteSourceText, saveSourceText, translateEn2De } from '../utils/apiTextResource'
const emits = defineEmits(['translate-result']);

defineExpose({
  isAdmin, isResearcher, isStudent
})

const srcTexts = ref([])
const inputValue = ref('')
const selectedOption = ref('')
const outputValue = ref('')

// const onSelectChange = () => {
//   inputValue.value = srcTexts.value.length ? srcTexts.value[selectedOption.value].text_en : ''
//   console.log('onSelectChange', selectedOption.value, srcTexts.value, srcTexts.value[selectedOption.value].text_en, inputValue.value)
// }

const translate = () => {
  translateEn2De(inputValue.value).then(res=>{
    if (res.code === 0) {
      outputValue.value = res.data.output_words
      emits('translate-result', res.data)
    }
  })
}

const save = () => {
  saveSourceText(inputValue.value).then(res=>{
    loadSourceTexts()
  })
}

const deleteSelected = () => {
  deleteSourceText(srcTexts.value[selectedOption.value].id).then(res=>{
    loadSourceTexts()
  })
  selectedOption.value = ''
}

watch(selectedOption, () => {
  if (selectedOption.value === '') {
    return
  }
  inputValue.value = srcTexts.value.length && selectedOption.value !== '' ? srcTexts.value[selectedOption.value].text_en : ''
  console.log('onSelectChange', selectedOption.value, inputValue.value)
})

const loadSourceTexts = () => {
  getSourceTexts().then(res=>{
    if (res.code === 0) {
      srcTexts.value = res.data.map(v=>v)
    }
  })
}

onMounted(() => {
  loadSourceTexts()
})

</script>

<style scoped>
.input-block {
  width: 1600px;
}
.input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.input-select {
  width: 100%;
}

.output-row {
  margin-top: 20px;
  width: 100%;
}

</style>